<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'BoundingRectangle',
        data() {
            return {}
        },
        mounted() {
            this.initCesium();
            this.addBoundingBox();
        },
        methods: {
            //初始化视图
            initCesium: function () {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    })
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addBoundingBox() {
                //定义多边形的坐标
                const degrees = [
                    [113.23279023170471,
                        23.0951874543701],
                    [113.23238253593443,
                        23.09495059893952],
                    [113.23276877403259,
                        23.094397934644462],
                    [113.23265075683594,
                        23.093973565874975],
                    [113.23480725288391,
                        23.093993303987],
                    [113.23536515235901,
                        23.09463479104927],
                    [113.23449611663817,
                        23.09540457148131],
                    [113.23279023170471,
                        23.0951874543701]
                ]
                //压平坐标[]
                let anies = degrees.flat(2);
                //构建多边形几何体
                const positions = Cesium.Cartesian3.fromDegreesArray(anies);
                let polygon1 = new Cesium.PolygonGeometry({
                    polygonHierarchy: new Cesium.PolygonHierarchy(positions)
                });
                let geometry1 = Cesium.PolygonGeometry.createGeometry(polygon1);

                //构建geometry的实例
                let polygon = new Cesium.GeometryInstance({
                    geometry: geometry1,
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
                    },
                    id: 'polygonInstance1'
                });

                // Cesium.BoundingRectangle.fromPoints()
                //通过所有的点构建保围矩形
                let boundingBox1 = Cesium.BoundingRectangle.fromPoints(positions);
                console.log(boundingBox1);
                //取值遍历计算出矩形范围
                let west = degrees[0][0]
                let south = degrees[0][1]
                let east = degrees[0][0]
                let north = degrees[0][1]
                for (let i = 0; i < degrees.length; i++) {
                    const degree = degrees[i];
                    const x = degree[0];
                    const y = degree[1];
                    west = Math.min(x, west);
                    south = Math.min(y, south);
                    east = Math.max(x, east);
                    north = Math.max(y, north);
                }
                console.log(west, south, east, north)
                //构建一个矩形几何体
                let rectangle1 = new Cesium.RectangleGeometry({
                    ellipsoid: Cesium.Ellipsoid.WGS84,
                    rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north),
                });
                let boxGeometry1 = Cesium.RectangleGeometry.createGeometry(rectangle1);

                //构建包围盒的实例
                let boxInstance1 = new Cesium.GeometryInstance({
                    geometry: boxGeometry1,
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5))
                    },
                    id: 'ellipsoidInstance1'
                });

                //Cesium.BoundingRectangle.fromRectangle()

                let boundingBox2 = Cesium.BoundingRectangle.fromRectangle(new Cesium.Rectangle(west, south, east, north));
                console.log(boundingBox2);


                //new Cesium.BoundingRectangle()
                //比较运算出包围盒的范围
                let minimumX = positions[0].x;
                let minimumY = positions[0].y;

                let maximumX = positions[0].x;
                let maximumY = positions[0].y;
                let width=0;
                let height=0;

                for (let i = 1; i < positions.length; i++) {
                    const p = positions[i];
                    const x = p.x;
                    const y = p.y;

                    minimumX = Math.min(x, minimumX);
                    maximumX = Math.max(x, maximumX);
                    minimumY = Math.min(y, minimumY);
                    maximumY = Math.max(y, maximumY);
                }

                let boundingBox3 = new Cesium.BoundingRectangle(minimumX,minimumY,width,height);
                console.log(boundingBox3);


                let primitive = new Cesium.Primitive({
                    geometryInstances: [polygon, boxInstance1],
                    asynchronous: false,//是否采用多线程
                    appearance: new Cesium.PerInstanceColorAppearance({
                        translucent: true,
                        closed: true
                    })
                });

                this.viewer.scene.primitives.add(primitive);

                this.viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(113.23276877403259,
                        23.094397934644462, 2000.0), // 设置位置
                    orientation: {
                        heading: Cesium.Math.toRadians(20.0), // 方向
                        pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
                        roll: 0
                    }
                })

            }
        },

    }
</script>

